<template>
  <div>
    <van-nav-bar :title="$route.name" @click-left="$router.back()" left-text="返回" left-arrow/>
    <div>
      <img :src="info.img" alt>
    </div>
    <div>商品价格：{{ info.price }}</div>
    <div>商品名称：{{ info.goodsname }}</div>
    <div>商品数量：{{ num }}</div>
    <div id="desc" v-html="info.description"></div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24"/>
      <van-goods-action-icon icon="cart-o" text="购物车"/>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000"/>
      <van-goods-action-button @click="addCart" type="warning" text="加入购物车"/>
      <van-goods-action-button @click="goBuy" type="danger" text="立即购买"/>
    </van-goods-action>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { goodsInfo, addCart } from "../request/api";
import { Dialog } from "vant";
export default {
  data() {
    return {
      info: {},
      num: 1 //商品数量
    };
  },
  computed: {
    ...mapGetters(["getUser"])
  },
  mounted() {
    //获取当前商品详情列表
    goodsInfo({
      id: this.$route.query.id
    }).then(res => {
      console.log(res, "商品详情");
      if (res.code == 200) {
        this.info = res.list[0];
      }
    });
  },
  methods: {
    //加入购物车事件
    addCart() {
      if (this.getUser) {
        //准备加入购物车
        addCart({
          uid: this.getUser.uid,
          goodsid: this.info.id,
          num: this.num
        }).then(res => {
          if (res.code == 200) {
            this.$router.push("/cart");
          }
        });
      } else {
        Dialog.confirm({
          title: "",
          message: "没有登录无权限加入购物车，去登录"
        })
          .then(res => {
            this.$router.push("/login");
          })
          .catch(() => {});
      }
    },
    //订单事件
    goBuy() {
      this.$router.push("/order");
    }
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
#desc >>> img {
  width: 100%;
}
</style>
